<template>
  <div v-if="list_itemData" class="deil_mo">
    <div class="mo-l">
      <span class="n_l">组件名称：</span>
      <el-input v-model.trim="list_itemData.name" class="page_num" @input="changeParent" />
    </div>
    <div v-if="list_type == '序列号组件'" class="mo-l">
      <span class="n_l">序列号类型：</span>
      <el-select
        v-model="list_itemData.codeType"
        class="select_coder"
        filterable
        clearable
        @change="changeCodeType"
      >
        <el-option style="text-align: center" :value="1" label="二维码" />
        <el-option style="text-align: center" :value="2" label="一维码" />
      </el-select>
    </div>
    <div v-if="list_type == '序列号组件'" class="mo-l">
      <span class="n_l">调用数据：</span>
      <template v-for="(it, itIndex) in list_itemData.dataTypeVos" :key="itIndex">
        <el-select
          v-model="it.category"
          class="select_coder"
          filterable
          clearable
          @change="changeParent"
        >
          <template v-for="(item, index) in category">
            <el-option
              v-if="!(list_itemData.codeType == 2 && (index + 1 == 4 || index + 1 == 5))"
              :key="index"
              style="text-align: center"
              :value="index + 1"
              :label="item"
            />
          </template>
        </el-select>
      </template>
    </div>

    <template v-for="(it, itIndex) in list_itemData.dataTypeVos" :key="itIndex">
      <div v-if="list_type == '序列号组件' && it.category == 1" class="mo-l">
        <span class="n_l">调用数据：</span>
        <el-input
          v-model.trim="it.val"
          type="textarea"
          class="select_coder"
          @input="changeParent"
        />
      </div>
    </template>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <div class="sel_data">
        <div class="btn_add">
          <span class="n_l">调用数据：</span>
          <div class="n_r"
            ><el-icon color="#007cff" class="plus_add" @click="addData">
              <CirclePlusFilled /> </el-icon
            ><span class="n_l">添加</span>
          </div>
        </div>
        <div class="module_add">
          <div v-for="(item, index) in list_itemData.dataTypeVos" :key="index" class="big_card">
            <div class="list_li" @click.stop="editUse(index)">
              <div class="ordi_li">
                <span>{{ index + 1 }}</span>
                <div>{{ category2[item.category - 1] }}</div>
              </div>
              <div class="btn_li">
                <i class="material-icons">menu</i>
                <i class="material-icons" @click.stop="delUse(index)">close</i>
              </div>
            </div>
            <el-select
              v-if="item.isShow"
              v-model="item.category"
              class="select_coder"
              filterable
              clearable
              @change="changeParent"
            >
              <template v-for="(item, index) in category2" :key="index">
                <el-option style="text-align: center" :value="index + 1" :label="item" />
              </template>
            </el-select>
            <el-input
              v-if="item.category == 2 && item.isShow"
              v-model.trim="item.val"
              type="textarea"
              class="select_coder"
              @input="changeParent"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="mo-l">
      <span class="n_l">锁定比例：</span>
      <el-checkbox v-model="list_itemData.lockScale" size="large" @change="changeScale" />
    </div>
    <div class="mo-l">
      <span class="n_l">宽度：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.width"
          show-input
          :show-input-controls="false"
          :max="Math.round(headerForm.width * mm_px) + 1"
          @input="changeWidth"
        />
      </div>
    </div>
    <div v-show="!list_itemData.lockScale" class="mo-l">
      <span class="n_l">高度：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.height"
          show-input
          :show-input-controls="false"
          :max="Math.round(headerForm.height * mm_px) + 1"
          @input="changeHeight"
        />
      </div>
    </div>

    <div class="mo-l">
      <span class="n_l">坐标X：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.coordinateX"
          show-input
          :show-input-controls="false"
          :min="0"
          :max="Math.round(Math.round(headerForm.width * mm_px) + 1 - list_itemData.width)"
          @input="changeParent"
        />
      </div>
      <div> </div>
    </div>
    <div class="mo-l">
      <span class="n_l">坐标Y：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.coordinateY"
          show-input
          :show-input-controls="false"
          :min="0"
          :max="Math.round(headerForm.height * mm_px + 1 - list_itemData.height)"
          @input="changeParent"
        />
      </div>
    </div>
    <div class="mo-l">
      <span class="n_l">旋转角度：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.rotateAngle"
          show-input
          :min="0"
          :max="360"
          :show-input-controls="false"
          @input="changeParent"
        />
      </div>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <span class="n_l">文本字体：</span>
      <el-select
        v-model="list_itemData.textFont"
        class="select_coder"
        filterable
        clearable
        @change="changeParent"
      >
        <template v-for="(item, index) in textFont" :key="index">
          <el-option style="text-align: center" :value="index + 1" :label="item" />
        </template>
      </el-select>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <span class="n_l">文本字号：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.textWordSize"
          show-input
          :show-input-controls="false"
          @input="changeParent"
        />
      </div>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <span class="n_l">文本行高：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.textRowHeight"
          show-input
          :show-input-controls="false"
          @input="changeParent"
        />
      </div>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <span class="n_l">首行缩进：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.textIndent"
          show-input
          :show-input-controls="false"
          @input="changeParent"
        />
      </div>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <span class="n_l">文本间距：</span>
      <div class="slider-demo-block">
        <el-slider
          v-model="list_itemData.textSpacing"
          show-input
          :show-input-controls="false"
          @input="changeParent"
        />
      </div>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <div class="text">
        <i
          v-for="(item, index) in tt"
          :key="index"
          :class="`material-icons ${list_itemData.textAlign == index + 1 ? 'activeFont' : ''}`"
          @click="formatAlign(index + 1)"
          >{{ item }}</i
        >
        <i
          :class="`material-icons ${list_itemData.textBold ? 'activeFont' : ''}`"
          @click="addFormat('bold')"
          >format_bold</i
        >
        <i
          :class="`material-icons ${list_itemData.textIncline ? 'activeFont' : ''}`"
          @click="addFormat('italic')"
          >format_italic</i
        >
        <i
          :class="`material-icons ${list_itemData.textUnderline ? 'activeFont' : ''}`"
          @click="addFormat('underlined')"
          >format_underlined</i
        >
      </div>
    </div>
    <div v-if="list_type == '文本组件'" class="mo-l">
      <span class="n_l">文本颜色：</span>
      <el-color-picker
        v-model="list_itemData.textColor"
        :predefine="predefineColors"
        @change="changeParent"
      />
    </div>

    <div v-show="list_itemData.codeType == 1 && list_type == '序列号组件'" class="mo-l">
      <span class="n_l">美化图片：</span>
      <h-image
        :width="80"
        :height="50"
        :src="list_itemData.image || defaultUploadImg"
        :show-del-btn="!!list_itemData.image"
        :padding="2"
        :mask-btn-gap="5"
        @del="deleteE"
      >
        <el-upload
          v-if="!list_itemData.image"
          :show-file-list="false"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <i class="iconfont icon-img-upload" style="color: #fff; font-size: 32px"></i>
        </el-upload>
      </h-image>
    </div>
    <div v-if="list_type == '图片组件'" class="mo-l">
      <span class="n_l">上传图片：</span>
      <h-image
        :width="80"
        :height="50"
        :src="list_itemData.image || defaultUploadImg"
        :show-del-btn="!!list_itemData.image"
        :padding="2"
        :mask-btn-gap="5"
        @del="deleteE"
      >
        <el-upload
          v-if="!list_itemData.image"
          :show-file-list="false"
          :on-change="handleChange"
          :auto-upload="false"
        >
          <i class="iconfont icon-img-upload" style="color: #fff; font-size: 32px"></i>
        </el-upload>
      </h-image>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, toRefs, onMounted } from 'vue'
  import type { UploadProps, UploadFile } from 'element-plus'
  import { storeToRefs } from 'pinia'
  import { useCodeState } from '../../../../store/modules/code'
  import JsBarcode from 'jsbarcode'
  import defaultUploadImg from '@/assets/image/avatar_upload_default.png'

  const codeStore = useCodeState()
  const { headerForm, imgListDelete } = storeToRefs(codeStore)
  const category = ref(['固定值', '防伪序列号', '仓储序列号', '防伪查询']) // 1-固定值，2-防伪序列号，3-仓储序列号，4-防伪查询（注：当codeType=1时，4才显示）
  const category2 = ref([
    '序号',
    '固定值',
    '防伪序列号',
    '仓储序列号',
    '品牌名称',
    '产品名称',
    '产品型号',
    '产品分类',
    '产品规格',
    '产品生产日期',
    '序列号注册日期',
    '序列号质保周期',
  ])
  //1-序号，2-固定值，3-防伪序列号，4-仓储序列号，5-品牌名称，6-产品名称，7-产品型号，8-产品分类，9-产品规格， 10-产品生产日期，11-序列号注册日期，12-序列号质保周期
  const textFont = ref(['微软雅黑', '黑体', '宋体', '楷体', '隶书', '幼圆', '仿宋'])
  const tt = ref(['format_align_left', 'format_align_center', 'format_align_right'])
  const list_itemData = ref(null)
  const formatAlign = (i) => {
    list_itemData.value.textAlign = i
    emit('set-parent', list_itemData.value)
  }
  const addFormat = (i) => {
    if (i == 'bold') {
      list_itemData.value.textBold = !list_itemData.value.textBold
    }
    if (i == 'italic') {
      list_itemData.value.textIncline = !list_itemData.value.textIncline
    }

    if (i == 'underlined') {
      list_itemData.value.textUnderline = !list_itemData.value.textUnderline
    }
    emit('set-parent', list_itemData.value)
  }
  const predefineColors = ref([
    '#000000',
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
  ])
  const deleteE = () => {
    if (list_itemData.value.id || list_itemData.value.image.length > 0) {
      imgListDelete.value.push(list_itemData.value.image)
    }
    list_itemData.value.image = ''
    list_itemData.value.tmpImg = ''
    emit('set-parent', list_itemData.value)
  }
  const props = defineProps({
    //子组件接收父组件传递过来的值
    list_type: String,
    list_item: Object,
    mm_px: Number,
  })
  //使用父组件传递过来的值
  const { list_type, list_item, mm_px } = toRefs(props)
  const addData = () => {
    list_itemData.value.dataTypeVos.push({
      category: 2,
      val: '文本',
      isShow: false,
    })
    emit('set-parent', list_itemData.value)
  }
  let options2 = {
    displayValue: false,
    fontSize: 10,
    height: 30, //整个序列号的宽度
    width: 1,
    textMargin: 1,
    margin: 0,
  }
  const changeCodeType = (val) => {
    if (val == 2) {
      setTimeout(() => {
        JsBarcode('#barcode', String('Hello world!'), options2)
      }, 50)
    }
    emit('set-parent', list_itemData.value)
  }
  const editUse = (index) => {
    list_itemData.value.dataTypeVos[index].isShow = !list_itemData.value.dataTypeVos[index].isShow
    emit('set-parent', list_itemData.value)
  }
  const delUse = (index) => {
    list_itemData.value.dataTypeVos.splice(index, 1)
    emit('set-parent', list_itemData.value)
  }
  // 比例是否锁定
  const changeScale = (val) => {
    if (val) {
      list_itemData.value.scaleSize = list_itemData.value.width / list_itemData.value.height
    }
    emit('set-parent', list_itemData.value)
  }
  const changeWidth = () => {
    if (list_itemData.value.lockScale) {
      if (list_itemData.value.height > Math.round(headerForm.value.height * mm_px.value) + 1) {
        list_itemData.value.height = Math.round(headerForm.value.height * mm_px.value) + 1
        list_itemData.value.scaleSize = list_itemData.value.width / list_itemData.value.height
        emit('set-parent', list_itemData.value)
        return
      }
      if (
        list_itemData.value.width / list_itemData.value.scaleSize >
        Math.round(headerForm.value.height * mm_px.value) + 1
      ) {
        list_itemData.value.height = Math.round(headerForm.value.height * mm_px.value) + 1
        list_itemData.value.scaleSize = list_itemData.value.width / list_itemData.value.height
        return
      }
      list_itemData.value.height = list_itemData.value.width / list_itemData.value.scaleSize
    }
    emit('set-parent', list_itemData.value)
  }
  const changeHeight = () => {
    emit('set-parent', list_itemData.value)
  }
  const emit = defineEmits(['set-parent'])
  const handleChange: UploadProps['onChange'] = (uploadFile: UploadFile) => {
    list_itemData.value.image = URL.createObjectURL(uploadFile.raw)
    list_itemData.value.tmpImg = uploadFile
    emit('set-parent', list_itemData.value)
  }
  onMounted(() => {
    list_itemData.value = list_item.value
  })
  const changeParent = () => {
    emit('set-parent', list_itemData.value)
  }
</script>

<style scoped lang="scss">
  @import './blank.scss';
</style>
